<template>
	<div>
		<div  v-if="showPrise" class="page-container">
			<el-form :model="dataForm" label-width="130px" :rules="dataFormRules" ref="dataForm"  :size="size"
				label-position="right">
				<el-form-item label="服务名称:" prop="serviceName">
					<el-input v-model="dataForm.serviceName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="服务简介:" prop="serviceTypeRemark">
					<el-input v-model="dataForm.serviceTypeRemark" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="服务价格:" prop="servicePrice">
					<el-input type="number"  @input="handleInput2(dataForm.servicePrice)" v-model="dataForm.servicePrice" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="服务分类:" prop="img">
					<el-select v-model="dataForm.serviceTypeId" placeholder="选择分类" class="filter-item">
						<el-option v-for="item in serviceTypes" :key="item.id" :label="item.serviceTypeName" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item label="服务图片:" prop="name">
					<el-upload
					ref="upload"
					action="#"
					accept="image/png,image/gif,image/jpg,image/jpeg"
					list-type="picture-card"
					:limit=limitNum
					:on-change="imageChange"
					:auto-upload="false"
					:on-exceed="handleExceed"
					:before-upload="handleBeforeUpload"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove" 
					:v-show="!hideShow">
					<i class="el-icon-plus"></i>
				</el-upload>																	
			</el-form-item>
				<el-form-item label="需提前预约时间:" prop="serviceReservationTime">
					<el-input v-model="dataForm.serviceReservationTime" auto-complete="off"></el-input>小时
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button :size="size" type="primary" @click="showOrHide()" :loading="editLoading">下一步</el-button>
				<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
			</div>
  		</div>

		<div  v-if="showPrise1" class="page-editor">
			<div style="height:500px; overflow:scroll;">
				<quill-editor v-model="dataForm.serviceInfo" ref="myQuillEditor" style="height: 500px;" >
      			</quill-editor>
			</div>
			<div slot="footer" class="dialog-footer" style="height:60px;margin-top:10px;">
				<el-button :size="size" type="primary" @click.native="submitForm" :loading="editLoading">保存</el-button>
				<el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
			</div>
		</div>
	</div>
  


</template>
<script>
import PopupTreeInput from "@/components/PopupTreeInput"
import KtButton from "@/views/Core/KtButton"
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog"
import { format } from "@/utils/datetime"
import {quillEditor} from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'


export default {
	components:{
		PopupTreeInput,
		TableColumnFilterDialog,
		quillEditor
	},
	data() {
		return {
            serviceTypes: [{"id":"","serviceTypeName":""}],
			showPrise:true,
			showPrise1:false,
            limitNum: 1,
			size: 'small',
			pageResult: {},
			editLoading: false,
			service_id:'',
			dataFormRules: {
				serviceName: [
					{ required: true, message: '请输入服务名称', trigger: 'blur' }
				],
				serviceTypeRemark: [
					{ required: true, message: '请输入服务简介', trigger: 'blur' }
				],
				servicePrice: [
					{ required: true, message: '请输入服务价格', trigger: 'blur' }
				],
				serviceTypeId: [
					{ required: true, message: '请选择分类', trigger: 'blur' }
				],
				serviceReservationTime: [
					{ required: true, message: '请输入预约时间', trigger: 'blur' }
				],
				serviceInfo: [
					{ required: true, message: '请输入服务详情', trigger: 'blur' }
				],
			},
			// 新增编辑界面数据
			dataForm: {
				serviceName: '',
				serviceTypeRemark: '',//简介
				servicePrice: '',
				serviceTypeId: null,
				servicePics:'',
				file: null,
				serviceReservationTime: null,
				serviceInfo:''//服务详情
			},
		}
	},
	methods: {
		// 编辑
		submitForm: function () {
                var me = this;
                debugger;
				//this.$refs.dataForm.validate((valid) => {
				//if (valid) {
					this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        debugger;
						let params = this.dataForm;
                        if(me.service_id!=null && me.service_id !=''){
                            me.update()
                        }else{
                            me.add()
                        }
					})
				//}
			//})
		},
		imageChange(file, fileList) {
			console.log(file, fileList);
			debugger
			if(file){
				this.uploadFile(file);
			}
		},
		uploadFile(file) {
			debugger
			var me = this;
			let formData = new FormData()
			formData.append('file', file.raw)
			this.$api.file.upload(formData).then((res) => {
				console.log(res);
				debugger;
                if(res.code == 200) {
					me.dataForm.servicePics = res.data;
                    this.$message({ message: '图片上传成功', type: 'success' })
                } else {
                    this.$message({message: '图片上传失败, ' + res.msg, type: 'error'})
                }
            })
		},
		 //新增
        add(){
            let params = this.dataForm;
            console.log(params);
            debugger;
            this.$api.serviceManage.save(params).then((res) => {
                if(res.code == 200) {
                    sessionStorage.removeItem("service_id")
                    this.$message({ message: '操作成功', type: 'success' })
                } else {
                    sessionStorage.removeItem("service_id")
                    this.$message({message: '操作失败, ' + res.msg, type: 'error'})
                }
            })
        },
        //修改
        update(){
            debugger;
            let params = this.dataForm;
            console.log(params);
            this.$api.serviceManage.update(params).then((res) => {
                if(res.code == 200) {
					sessionStorage.removeItem("service_id")
                    this.$message({ message: '操作成功', type: 'success' })
                } else {
                    sessionStorage.removeItem("service_id")
                    this.$message({message: '操作失败, ' + res.msg, type: 'error'})
                }
            })
        },

		//隐藏和展示的控制方法
		showOrHide: function () {
			this.showPrise = false;
			this.showPrise1 = true;
		},
		// 时间格式化
      	dateFormat: function (row, column, cellValue, index){
          	return format(row[column.property])
      	},
		handleInput2(withdrawAmount) {
            var re = /^[0-9]+.?[0-9]*/;
			if(!re.test(withdrawAmount)){
					mui.alert("请输入正确的充值金额！"); 
					return
			}
					//限制小数点后2位数
			var index = String(withdrawAmount).indexOf('.');
			if (index != -1) {
				var arrStr = [];
				arrStr = String(withdrawAmount).split('.');
				if (arrStr[1] && arrStr[1].length > 2) {
					this.dataForm.servicePrice = String(withdrawAmount).substring(0, index + 3);
					return;
				}else{
					this.dataForm.servicePrice = withdrawAmount;
				}
			} else {
				this.dataForm.servicePrice = withdrawAmount;
			}
        },

			
    	//图片上传相关方法
		handleBeforeUpload(file){
			console.log('before')
			if(!(file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/jpg' || file.type === 'image/jpeg')) {
				this.$notify.warning({
				title: '警告',
				message: '请上传格式为image/png, image/gif, image/jpg, image/jpeg的图片'
				})
			}
			let size = file.size / 1024 / 1024 / 2
			if(size > 2) {
				this.$notify.warning({
				title: '警告',
				message: '图片大小必须小于2M'
				})
			}	
		},
		// 文件超出个数限制时的钩子
		handleExceed(files, fileList) {
		},
		// 文件列表移除文件时的钩子
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		// 点击文件列表中已上传的文件时的钩子
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		hideShow() {//当图片多于一张的时候，就隐藏上传框
			return this.files === '' ? false : true
		},
		getid(){
            var me = this;
			me.service_id = sessionStorage.getItem("service_id");
			debugger;
            if(me.service_id !== '' && me.service_id !== null){
                let req = {"id":me.service_id}
                this.$api.serviceManage.findbyid(req).then((res) => {
                    if(res.code != 200) {
                        this.$message({
                        message: res.msg,
                        type: 'error'
                        })
                    } else {
                        this.dataForm = res.hospitalService;
                    }
                })
            }
		},
		//查询服务分类
		findservicetype(){
			var req = {};
			this.$api.servicetype.findPage(req).then((res) => {
				if(res.code != 200) {
					this.$message({
					message: res.msg,
					type: 'error'
					})
				} else {
					this.serviceTypes = res.page.list;
				}
			})
		},
	},
    mounted() {
		this.getid()
		this.findservicetype()
	}
}
</script>

<style lang="scss" scoped>
    .page-container{
        width:40%;
        min-width:600px;
        margin:100px auto;
    }
	.page-editor{
		width:40%;
        min-width:600px;
		height:600px;
        margin:10px auto;
	}
    .el-button{
        width:150px;
        border-redius:5px;
        margin-left:50px;
    }
    .el-input {
        width: 300px;
        height: 32px;
        line-height: 32px;
    }
    .el-select {
        width: 300px;
    }
</style>